<template>
  <!-- 区域楼栋- 房间与人员的绑定 -->
  <div class="room_personnel_binding">
    <el-row class="all_main">
      <dragdrop :width="0" :widthLeft="'15%'">
        <template slot="left">
          <div class="all_left">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>区域楼栋</span>
              </div>
              <div class="tree_list">
                <!-- <el-scrollbar style="height:100%"> -->
                <el-tree
                  :data="treedata"
                  node-key="id"
                  default-expand-all
                  :expand-on-click-node="false"
                  @node-click="clickNode"
                  :highlight-current="true"
                  ref="tree"
                  :indent="2"
                >
                  <span
                    class="custom-tree-node"
                    slot-scope="{ node, data }"
                    :style="{paddingLeft:'0px'}"
                  >
                    <span :class="data.type=='area'?'colorfont':'colorfont1'">
                      <i :class="data.icon" :style="{marginRight:'5px'}"></i>
                      {{node.label}}
                    </span>
                  </span>
                </el-tree>
                <!-- </el-scrollbar> -->
              </div>
            </div>
          </div>
        </template>
        <template slot="right">
          <div class="all_right" v-show="showlist=='building'?true:false">
            <div class="grid-content bg-purple-light">
              <div class="header_title">
                <span>{{titlename}}</span>
              </div>
              <!-- 楼栋房间信息 -->
              <div class="area_bulding_main">
                <div class="building_room_main">
                  <el-card class="box-card1">
                    <div class="textitem1">请选择楼层:</div>
                    <div class="textitem2">
                      <el-row>
                        <el-col
                          id="add_room"
                          :span="2"
                          v-for="(item,index) in areabuldingfloor"
                          :key="index"
                          class="el_col_button"
                        >
                          <el-button
                            size="mini"
                            :class="{contcolor:buttonindex===index}"
                            @click="checkfloors(index)"
                          >{{index+1+'F'}}</el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </el-card>
                </div>
              </div>
              <!-- 房间分页信息 -->
              <div class="building_romm_list">
                <!-- <el-row :gutter="20"> -->
                <!-- <el-col :span="6" v-for="(item,index) in rooomlistArr" :key="index" class="textbox"> -->
                <div v-for="(item,index) in rooomlistArr" :key="index" class="textbox">
                  <div class="building_list">
                    <el-card class="box-card">
                      <div class="textmain">
                        <div class="textitem">
                          <div id="nam_type">
                            <span>类型:{{item.roomType | filetertype}}</span>
                            <span>编号:{{item.roomCode}}</span>
                          </div>
                          <div id="bianhao">
                            <span>名称:{{item.roomName}}</span>
                          </div>
                        </div>
                        <div class="textitem1">
                          <div id="nam_type">
                            <span>最大入住人数:{{item.limitNum}}</span>
                          </div>
                          <div id="nam_type">
                            <span>当前入住人数:{{item.currentNum}}</span>
                          </div>
                          <!-- <div id="textitemname1">最大入住人数:{{item.limitNum}}</div>
                          <div class="textitemname1">当前入住人数:{{item.currentNum}}</div>-->
                          <div class="textitemname2" style="word-break: break-all;">
                            <span class="title">入住人员:</span>
                            <span
                              class="title"
                              v-for="(item1,index1) in item.userList"
                              :key="index1"
                            >{{index1 != item.currentNum-1 ? item1.userName + '、':item1.userName}}</span>
                          </div>
                        </div>
                      </div>

                      <!-- <div class="textitemname" style="height:30px">
                                  <div>名称:<span>{{item.roomName}}</span></div>
                                  <div>类型:{{item.roomType | filetertype}}</div>
                      </div>-->
                      <!-- <div class="textitemname1">最大入住人数:{{item.limitNum}}</div>
                                <div class="textitemname1">当前入住人数:{{item.currentNum}}</div>
                                <div style="height:130px">
                                    <div class="textitem" >
                                      <span class="title">入住人员:</span><span style="paddingRight:10px" class="title" v-for="(item1,index1) in item.userList" :key="index1">{{item1.userName}}</span>
                                    </div>
                      </div>-->
                      <div class="textitemfoort">
                        <el-row class="bulding_caozuo">
                          <el-col :span="7" :offset="18" class="bulding_font_size">
                            <el-button type="text" @click="addroomstaff(item)">房间人员设置</el-button>
                          </el-col>
                        </el-row>
                      </div>
                    </el-card>
                  </div>
                </div>
                <!-- </el-col> -->
                <!-- </el-row>   -->
              </div>
              <!-- 分页 -->
              <div class="page" v-show="recordCount>10?true:false">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangepage"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="recordCount"
                ></el-pagination>
              </div>
            </div>
          </div>
        </template>
      </dragdrop>
    </el-row>
    <!-- 房间人员设定弹窗 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataListpage="getlayersroomlist"
    ></add-or-update>
  </div>
</template>
<script>
import AddOrUpdate from './room-personnel-add'
export default {
  data() {
    return {
      addOrUpdateVisible: false,
      userGuid: '',
      treedata: [],
      arealsit: [],
      titlename: '',
      showlist: '',
      //楼层数
      areabuldingfloor: 0,
      //选择楼层
      buttonindex: '',
      //楼层房间
      rooomlistArr: [],
      pageSize: 30,
      pageNum: 1,
      recordCount: 0,
      currentPage: 1,
      //楼栋id
      buildingid: ''
    }
  },
  components: {
    AddOrUpdate
  },
  mounted() {
    this.getareabuldingtree()
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  filters: {
    filetertype: function(roomType) {
      if (roomType == 0) {
        return (roomType = '房间')
      }
      if (roomType == 1) {
        return (roomType = '食堂窗口')
      }
      if (roomType == 3) {
        return (roomType = '小卖部')
      }
      if (roomType == 2) {
        return (roomType = '通道门')
      }
      if (roomType == 4) {
        return (roomType = '公共场所')
      }
    }
  },
  methods: {
    // 递归区域路径
    getPath(node) {
      var text
      if (node.parent && node.parent.label) {
        text = this.getPath(node.parent)
        text = text + '/' + node.label
      } else {
        text = node.label
      }
      return text
    },
    //上级部门数据
    getarealsit(arealsit) {
      for (var i in arealsit) {
        if (arealsit[i].type == 'area') {
          var itemobj = {
            label: arealsit[i].label,
            value: arealsit[i].name
          }
          this.arealsit.push(itemobj)
          this.getarealsit(arealsit[i].children)
        }
      }
    },
    //树状数据添加
    recursiveget(treedata) {
      for (var i in treedata) {
        if (treedata[i].type == 'area') {
          treedata[i].icon = 'el-icon-map-location'
          this.recursiveget(treedata[i].children)
        } else {
          treedata[i].icon = 'el-icon-office-building'
          this.recursiveget(treedata[i].children)
        }
      }
      return treedata
    },
    // 获取区域楼栋树形数据
    getareabuldingtree(val) {
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.treedata = this.recursiveget(data.messageContent)
          this.getarealsit(data.messageContent)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 树形控件点击事件
    clickNode(obj, node) {
      console.log(obj)
      console.log(node)
      if (node != null) {
        this.titlename = this.getPath(node)
      }
      this.showlist = ''
      if (obj.type == 'building') {
        //  alert('1234')
        this.showlist = 'building'
        this.areabuldingfloor = obj.layer
        this.buttonindex = ''
        this.rooomlistArr = []
        this.recordCount = 0
        this.buildingid = obj.name;
        // 默认打开第一层
        this.checkfloors(0)
      }
    },
    //选择楼层
    checkfloors(val) {
      this.pageNum = 1
      this.buttonindex = val
      this.getlayersroomlist(this.buttonindex + 1)
    },
    //指定楼栋下的房间信息分页查询
    getlayersroomlist(val) {
      this.$http({
        url: this.$http.adornUrl('/area/room/room-details-user-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: {
              buildingGuid: this.buildingid,
              layers: val,
              unitGuid: this.changeschoolid
            }
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data)
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          this.rooomlistArr = data.messageContent.data
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //新增房间人员
    addroomstaff(item) {
      console.log(item)
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.addinit(item)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getlayersroomlist(this.buttonindex + 1)
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getlayersroomlist(this.buttonindex + 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.room_personnel_binding {
  #nam_type {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;
    > span:nth-child(1) {
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
    }
    > span:nth-child(2) {
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
    }
  }
  #bianhao {
    > span {
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
    }
  }
  .all_main {
    height: calc(100vh - 130px);
    .all_left {
      // height: 400px;
      height: 100%;
      // border-right: 2px solid #ccc;
      .bg-purple {
        height: 100%;
        width: 100%;
        // overflow-x: scroll;
        white-space: nowrap;
        // padding: 0 10px 0 0px;
        .header_title {
          padding: 20px 0;
          font-weight: bolder;
          text-align: center;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
          overflow: hidden;
        }
        .add_button {
          display: flex;
          padding-top: 20px;
          justify-content: center;
          border-bottom: 1px solid #e5e9f2;
          padding-bottom: 10px;
          overflow: hidden;
        }
        //滚动条的宽度
        ::-webkit-scrollbar {
          overflow-y: auto;
          width: 10px;
          height: 10px;
        }
        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #a1a3a9;
          border-radius: 3px;
        }
        .tree_list {
          height: calc(100vh - 185px);
          width: 100%;
          overflow-x: hidden;
          overflow-y: auto;
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
          }
          .custom-tree-node {
            // padding-left: 10px;
            /deep/.el-button + .el-button {
              margin-left: 0px;
            }
            //
            font-size: 12px;
            .colorfont {
              color: #17b3a3;
            }
          }
        }
      }
    }
    .all_right {
      height: calc(100vh - 130px);
      overflow: auto;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }
      // border-left: 2px solid #ccc;
      padding: 0px 5px;
      .bg-purple-light {
        .header_title {
          padding: 10px 0 20px 0;
          font-weight: bolder;
          padding-left: 20px;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
        }
        .area_bulding_main {
          .building_room_main {
            margin-top: 5px;
            // padding: 0px 10px;
            .box-card1 {
              padding: 10px;
              .textitem1 {
                color: #909399;
                padding-bottom: 10px;
              }
              .textitem2 {
                padding-bottom: 10px;
                line-height: 30px;
                .contcolor {
                  color: #fff;
                  background-color: #45c2b5;
                }
              }
            }
          }
        }
        .building_romm_list {
          // margin-top: 10px;
          // padding: 0px 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .textbox {
            margin-top: 10px;
            width: 170px;
            margin-right: 5px;
            font-size: 12px;
            .building_list {
              .box-card {
                padding: 0 5px;
                .textmain {
                  height: 140px;
                  font-weight: bolder;
                  color: #909399;
                  // padding: 5px 5px;
                  .textitem {
                    font-weight: bolder;
                    color: #909399;
                    padding: 5px 0px;
                    // margin-bottom: 10px;
                  }
                  .textitem1 {
                    font-weight: bolder;
                    color: #909399;
                    // padding: 5px 5px;
                  }
                }
                .textitemfoort {
                  height: 100%;
                  border-top: 1px solid #e5e9f2;
                  .bulding_caozuo {
                    padding: 2px 0px;
                    height: 30px;
                    .bulding_font_size {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      border-left: 1px solid #e5e9f2;
                      .el-button--medium {
                        font-size: 18px;
                        padding: 5px 20px;
                        margin-left: -55px;
                      }
                      .el-button--text {
                        font-size: 12px;
                      }
                    }
                    .bulding_font_size1 {
                      border-right: 0px solid #e5e9f2;
                    }
                  }
                }
              }
            }
          }
        }
        .page {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>